<template>
	<view :class="['digital-keyboard',{'keyboard-show':!keyBoardSwitch}]" @tap.stop="">
		<view class="list" :hover-start-time='0' 
		@tap.stop="setKey(key)" :hover-stay-time="200" hover-class="key-hove" 
		v-for="(key,index) in data" :key='index'>{{key=='.'&&!decimalPoint?'':key}}</view>
	</view>
</template>

<script>
	export default{
		props:['keyBoardSwitch','decimalPoint'],
		data(){
			return{
				data:[1,2,3,4,5,6,7,8,9,'.',0,''],
				value:'',
			}
		},
		methods:{
			setKey(k){
				if(k==='.'&&!this.decimalPoint){
					return;
				}
				k===''?this.value=this.value.substring(0,this.value.length-1):this.value+=k.toString();
				this.$emit('change',k)
			},
		},
		watch:{
			keyBoardSwitch:function(){
				if(!this.keyBoardSwitch)this.$emit('closeKeyboard',this.value);
			}
		}
	}
</script>

<style lang="scss">
	.digital-keyboard{
		width: 100vw;
		position: fixed;
		z-index: 1000;
		bottom: 0;
		overflow: hidden;
		border-top: 1px solid #c8c8c8;
		box-sizing: border-box;
		.list{
			width: 33.3%;
			height: 80upx;
			line-height: 80upx;
			box-sizing: border-box;
			float: left;
			text-align: center;
			font-size: 24px;
			border-left:1px solid #c8c8c8;
			border-bottom: 1px solid #c8c8c8;
			background: #fff;
			&:nth-child(3n){
				border-right: 1px solid #c8c8c8;
			}
			&:last-child{
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					width: 50upx;
					height: 50upx;
					background: url('')no-repeat;
					background-size: 100% 100%;
				}
			}
		}
		.key-hove{
			font-size: 30px;
		}
	}
	.keyboard-show{
		height: 0;
	}
</style>
